<script setup lang="ts">
useHead({
  title: "用户投稿"
})
const route = useRoute()
const lastModifiedDate = ref('')

// console.log(route.params.user_id)

//测试
const testMessage = ref('')

//refs
const fileInput = ref(null)

function uploadFileInputHandler(){
    fileInput.value.click()
}

async function uploadFile(event:any){
  try {
      const fileHandle = await window.showOpenFilePicker({
          excludeAcceptAllOption: false,
          types: [
              {
                  description: '视频文件',
                  accept: {
                      'video/*': ['.mp4', '.avi', '.mov']
                  },
              },
          ],
      });
      const file = await fileHandle[0].getFile();
      
      lastModifiedDate.value = await file;
      console.log(file);
      const formData = new FormData();
      formData.append('file', file);
      try {
          const response:any = await $fetch('/api/upload/upload_video', {
              method: 'POST',
              body: formData,
          });
          if (response.ok) {
              const data = await response.json();
              console.log('Upload successful:', data);
          } else {
              console.error('Upload failed:', response.status);
          }
      } catch (error) {
          console.error('Error:', error);
      }
  } catch (error:any) {
      if (error.name === 'AbortError') {
          console.log('User aborted the file picker.');
      } else {
          console.error('Error:', error);
      }
  }
}
</script>

<template>
    <div>用户id:{{ route.params.user_id }}</div>
    <!-- <div class="uploadBox" @click="uploadFileInputHandler"></div> -->
     <div class="uploadBox" @click="uploadFile"></div>
    <input type="file" ref="fileInput" @change="uploadFile" style="display: none"/>
    <div>{{ testMessage }}</div>
</template>

<style scoped>
.uploadBox{
    width: 500px;
    height: 300px;
    border: 5px solid #000;
    border-radius: 15px;
    cursor: pointer;

}
</style>